<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-11-09 11:42:09
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-10-28 14:06:10
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\pageModel\components\dataConfigModel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dataConfigModel">
    <el-dialog
      title="数据配置"
      :visible.sync="dataConfigOpen"
      width="70%"
      :before-close="dataConfigClose"
    >
      <div>
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="操作类型">
            <el-select
              v-model="form.type"
              :popper-append-to-body="false"
              popper-class="selectClass"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in dict.type.pt_app_page_button_type"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="删除前校验接口地址"
            v-if="form.type === 'handleDel'"
          >
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入接口地址"
              v-model="form.deleteBeforeUrl"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="自定义类型" v-if="form.type === 'handleExt'">
            <el-radio-group v-model="form.zdyLxb">
              <el-radio label="1">打开本地页面（新标签）</el-radio>
              <el-radio label="2">打开外部链接（新窗口）</el-radio>
              <el-radio label="3">请求地址</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="tip" v-if="form.type === 'handleExt'">
            <p class="tipLabel" style="color: red; margin-bottom: 5px">
              例如：
            </p>
            <p style="margin-bottom: 5px">
              <span class="tipLabel">打开本地链接：</span
              ><span style="color: #61a151">/system/user</span
              ><span style="margin-left: 20px; margin-right: 12px"
                >如有参数:</span
              ><span style="color: #61a151"> /system/user?id={id}</span>或<span
                style="color: #61a151"
              >
                /system/user/{id}</span
              >
            </p>
            <p style="margin-bottom: 12px">
              <span class="tipLabel">打开外部链接：</span
              ><span style="color: #61a151"
                ><a href="https://www.baidu.com/" target="_blank"
                  >https://www.baidu.com/</a
                ></span
              >
            </p>
          </div>
          <el-form-item label="操作" v-if="form.type === 'handleExt'">
            <codeEdit
              :modelValue="form.optJs"
              mode="javascript"
              theme="idea"
              ref="codeEditRef"
            ></codeEdit>
          </el-form-item>
          <el-form-item label="页面模型" v-if="form.type === 'zb'">
            <el-select
              v-model="form.zbCode"
              :popper-append-to-body="false"
              popper-class="selectClass"
              style="width: 100%"
              @change="handleModelChange"
              placeholder="请选择页面模型"
            >
              <el-option
                v-for="item in pageModelList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否显示按钮" v-if="form.type === 'zb'">
            <el-radio-group v-model="form.zbDisplayButton">
              <el-radio label="1">是</el-radio>
              <el-radio label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row :gutter="50" v-for="(val, index) in form.cnSm" :key="index">
            <el-col :span="10" v-if="form.type === 'zb'"
              ><el-form-item label="入参声明">
                <el-select
                  v-model="val.in"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                  filterable
                  :placeholder="
                    form.zbCode ? '请选择入参声明' : '请先选择页面模型'
                  "
                  :disabled="!form.zbCode"
                >
                  <el-option
                    v-for="item in pageModelParamsList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.field"
                  >
                    <span style="float: left">{{ item.label }}</span>
                    <span
                      style="float: right; color: #8492a6; font-size: 13px"
                      >{{ item.field }}</span
                    >
                  </el-option>
                </el-select>
              </el-form-item></el-col
            >
            <el-col :span="10" v-if="form.type === 'zb'"
              ><el-form-item label="出参声明">
                <el-select
                  v-model="val.out"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                  placeholder="请选择出参声明"
                  filterable
                >
                  <el-option
                    v-for="item in outParamsList"
                    :key="item.field"
                    :label="item.label"
                    :value="item.field"
                  >
                    <span style="float: left">{{ item.label }}</span>
                    <span
                      style="float: right; color: #8492a6; font-size: 13px"
                      >{{ item.field }}</span
                    >
                  </el-option>
                </el-select>
              </el-form-item></el-col
            >
            <el-col :span="3" v-if="form.type === 'zb'"
              ><el-button
                @click="handleOperate('1', index)"
                v-if="index === 0"
                type="primary"
                icon="el-icon-plus"
                circle
              ></el-button
              ><el-button
                @click="handleOperate('2', index)"
                v-if="index !== 0"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button
            ></el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataConfigClose">取 消</el-button>
        <el-button
          type="primary"
          @click="
            handleDataConfigSum({
              ...form,
              optJs:
                form.type === 'handleExt' ? $refs.codeEditRef.contentValue : '',
            })
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import codeEdit from "@/components/codeEdit";
import { appPageModelList } from "@/api/app/pageModel";
import { appPageModelDetail } from "@/api/app/pageModel";
export default {
  name: "HyUiDataConfigModel",
  components: {
    codeEdit,
  },
  dicts: ["pt_app_page_button_type"],
  props: {
    dataConfigOpen: {
      type: Boolean,
      default: false,
    },
    dataConfigClose: {
      type: Function,
      default: () => {},
    },
    rowData: {
      type: Object,
      default: () => {},
    },
    appId: {
      type: String,
      default: "",
    },
    handleDataConfigSum: {
      type: Function,
      default: () => {},
    },
    pageCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {
        cnSm: [{ in: undefined, out: undefined }],
        zbDisplayButton: "2",
      },
      pageModelList: [],
      pageModelParamsList: [],
      outParamsList: [],
    };
  },

  async mounted() {
    this.form.type = this.rowData.buttonType;
    if (this.form.type === "zb") {
      this.getPageModelList();
      this.form = {
        ...this.form,
        zbCode: this.rowData.zbCode,
        zbDisplayButton: this.rowData.zbDisplayButton || "2",
      };
      if (this.rowData.cnSm) {
        this.handleModelChange(this.rowData.zbCode);
        this.form = { ...this.form, cnSm: JSON.parse(this.rowData.cnSm) };
      }
      if (
        sessionStorage.getItem("pageModel") &&
        JSON.parse(sessionStorage.getItem("pageModel"))?.step2
      ) {
        this.outParamsList = JSON.parse(
          sessionStorage.getItem("pageModel")
        )?.step2;
      }
    }
    if (this.form.type === "handleExt") {
      this.form = {
        ...this.form,
        zdyLxb: this.rowData.zdyLxb ? this.rowData.zdyLxb : "1",
        optJs: this.rowData.optJs,
      };
    }
    if(this.form.type === "handleDel"){
      this.form = {
        ...this.form,
        deleteBeforeUrl: this.rowData.optJs,
      };
    }
  },

  methods: {
    handleOperate(type, index) {
      if (type === "1") {
        this.form.cnSm.push({});
      } else {
        this.form.cnSm.splice(index, 1);
      }
    },
    async getPageModelList() {
      const res = await appPageModelList({
        pageNum: 1,
        pageSize: 9999,
        appId: this.appId,
      });
      if (res.code == 200) {
        this.pageModelList = res.rows.filter(
          (item) => item.code !== this.pageCode
        );
      }
    },
    async handleModelChange(value) {
      this.form.cnSm = [{ in: undefined, out: undefined }];
      const res = await appPageModelDetail({ code: value });
      if (res.code === 200) {
        this.pageModelParamsList = res.data?.resultFields;
      }
    },
    handleOpenDictList() {
      this.dictListOpen = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.dataConfigModel {
  .tip {
    // margin-left: 120px;
    color: #666;
    p {
      margin: 0 12px 0 12px;
    }
    .tipLabel {
      width: 120px;
      text-align: right;
      display: inline-block;
      padding-right: 12px;
      color: #606266;
      font-size: 14px;
    }
  }
}
</style>
